<template>
<view class="page" > 
	<view class='nav' :style="'height:'+navH1+'px;'">
		<view class="input_view" :style="'position:absolute;top:'+navH+'px;height:'+ navH2+'px'">
			<view class="input_view"  :style="'height:'+ navH2+'px'">
				<view class="title">个人中心</view>
			</view>
		</view>
	</view>
	<view class="top_view">
		<image class="top_view_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/my_topbg.png" mode=""></image>
		<view class="top_view_img1">
			<image class="img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/my_topbg1.png" mode="widthFix"></image>
			<view class="ttt_div" @click="toPage('dzmp',true)">
				<view class="flex_sb flex_ac">
					<view class=""><text v-if="!hasInfo" >登录</text><text v-else>{{info.nickname}}</text> 【招商名片】</view>
					<view class="dl_btn" v-if="!hasInfo">立即登录</view>
				</view>
				<view class="t_small">让每一次交换名片即是一次社交也是一次招商推介</view>
			</view>
		</view>
		<view class="flex_sb flex_ac m_top" :style="'top:'+navH1+'px;'">
			<view class="flex flex_ac" @click="toPage('dzmp',true)">
				<image v-if="info.avatar" class="tx" :src="info.avatar" mode=""></image>
				<image v-else class="tx" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/avatar.png" mode=""></image>
				<image class="tx_2wm" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/2wm.png" mode=""></image>
			</view>
			<view class="r_jian" v-if="!hasInfo" @click="toLogin">前往登录</view>
			<view class="r_jian" v-else @click="toPage('dzmp',true)"></view>
		</view>
	</view>
	
	<view class="flex xx_content">
		<div class='xx_item' @click='toXX'>
			<image class="img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/icon1.png" mode=""></image>
			消息
		</div>
		<div class='xx_item' @click="toPage('llList')">
			<image class="img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/icon2.png" mode=""></image>
			浏览
		</div>
		<div class='xx_item' @click="toPage('gzList')">
			<image class="img img_small" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/icon3.png" mode=""></image>
			收藏
		</div>
	</view>
	
	<view class="line_div"></view>
	<view class="line_item flex_sb" hover-class="item_active">
		<view class="flex_ac">
			<image class="l_l_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/iconzx.png" mode=""></image>在线联系
		</view>
		<view class="l_r_text">专属客服</view>
	</view>
	<view class="line_item none_border flex_sb" hover-class="item_active" @click="phone1">
		<view class="flex_ac">
			<image class="l_l_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/iconrx.png" mode=""></image>营销热线
		</view>
		<view class="l_r_text">投资市投资促进中心</view>
	</view>
	<view class="line_div"></view>
	<view class="line_item none_border flex_sb" hover-class="item_active" @click="phone">
		<view class="flex_ac">
			<image class="l_l_img l_l_img1" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/icondh.png" mode="heightFix"></image>电话联系
		</view>
		<view class="l_r_text">0797-8996761</view>
	</view>
	<view class="line_div"></view>
	<view class="line_item flex_sb" hover-class="item_active" @click="toPage('aboutus')">
		<view class="flex_ac">
			<image class="l_l_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/iconwm.png" mode=""></image>关于我们
		</view>
		<view class="l_r_text"></view>
	</view>
	<view class="line_item flex_sb"  hover-class="item_active">
		<!-- <view class=""> -->
		<button class="flex_ac line_item1" :plain="true" open-type="share">
			<image class="l_l_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/iconfx.png" mode=""></image>分享小程序
		</button>
		<!-- </view> -->
		<view class="l_r_text"></view>
	</view>
	
	<shouquan ref="shouquan" @getInfo='getInfo'></shouquan>
	<Tabbar current="4"></Tabbar>
</view>
</template>

<script>
	import { GetopenidByCode ,GetUseInfo, CheckUserByOpenid,AddWxappUser,gz,hy ,xx} from '@/utils/api.js'
	import shouquan from '@/components/shouquan/shouquan.vue'
	import Tabbar from '@/components/tabbar.vue'
	var time = null
	export default {
		data() {
			return {
				navH:uni.getStorageSync('navH'),
				navH1:uni.getStorageSync('navH1'),
				navH2:uni.getStorageSync('navH2'),
				info:{},
				hasInfo:false,
			}
		},
		components: {
			Tabbar,
			shouquan
		}, 
	  onPageScroll(val) {
		
		},
		onShareTimeline() {
			return {
				title: '投资钟祥',
			}
		},
		onShareAppMessage() {
			return {
				title: '投资钟祥',
			}
		},
		onShow() {
			GetUseInfo().then(res=>{
				uni.setStorageSync('userinfo', JSON.stringify(res.data))
				this.info = res.data
			})
			// if(!JSON.parse(uni.getStorageSync('userinfo')).nickname){
			// 	this.$refs.shouquan.show()
			// }
		},
		onLoad() {
			uni.hideTabBar({
					animation: false
			})
			this.checkLogin()
		
		},
		onReachBottom() {

		},
		methods:{
			toXX(){
				uni.navigateTo({
					url:'/pages/xxList/xxList_old'
				})
			},
			phone(){
				uni.makePhoneCall({
						phoneNumber: '0797-8996761' //仅为示例
				});
			},
			phone1(){
				uni.makePhoneCall({
						phoneNumber: '12345' //仅为示例
				})
			},
			checkLogin(){
				setTimeout(()=>{
					if(uni.getStorageSync('userinfo')&&uni.getStorageSync('userinfo').length>2){
						this.info = JSON.parse(uni.getStorageSync('userinfo'))
						this.hasInfo = true
						console.log()
					}else{
						this.checkLogin()
					}
				},100)
			},
			toLogin(){
				let that = this
				uni.login({
					provider: 'weixin',
					success: function (res) {
						GetopenidByCode({code:res.code}).then(res=>{
							uni.setStorageSync('openid',res.data.openid)
							uni.setStorageSync('session_key',res.data.session_key)
							CheckUserByOpenid({openid:uni.getStorageSync('openid'),role_id:uni.getStorageSync('role_id')}).then(res=>{
								if(res.status == 0){
									that.$refs.shouquan.show()
								}else{ 
									uni.setStorageSync('userinfo', JSON.stringify(res.data))
									uni.setStorageSync('token',res.data.token)
									that.hasInfo=true
									that.info = JSON.parse(uni.getStorageSync('userinfo'))
								}
							})
						})
					}
				});
			},
			getInfo(data){
				AddWxappUser({openid:uni.getStorageSync('openid'),nickname:data.nickName, gender:data.gender, avatar:data.avatarUrl, role_id:uni.getStorageSync('role_id')}).then(res=>{
					this.info = res.data
					uni.setStorageSync('userinfo',JSON.stringify(this.info))
					uni.setStorageSync('token',this.info.token)
					this.hasInfo=true
					if(!this.info.mobile){
						
					}
				})
			},
			toPage(page,type){
				if(!uni.getStorageSync('session_key')){
					this.toLogin()
					return
				}
				if(type&&!this.hasInfo){
					uni.showToast({
						title:'请先登录',
						icon:'none'
					})
					return
				}
				if(type=='subPage'){
					uni.navigateTo({
						url:`/subPage/pages/${page}/${page}`
					})
					return
				}
				uni.navigateTo({
					url:`/pages/${page}/${page}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.nav{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	transition: all 0.5s;
}
.input_view{
	display: flex;
	align-items: center;
	border-radius: 2px;
	width: 100%;
	.title{
		font-weight: 500;
		text-align: center;
		font-size: 20px;
		text-align: center;
		width: 100%;
		color: #fff;
	}
}
.ss_div{
	position: absolute;
}
page,.page{
	width: 100%;
	height: 100%;
	.top_view{
		position: relative;
		height: 240px;
		width: 100%;
		.m_top{
			position: absolute;
			z-index: 1;
			padding: 5px 20px;
			width: calc(100% - 40px);
			color: #fff;
			font-size: 14px;
			.tx{
				height: 48px;
				width: 48px;
				margin-right: 20px;
				border-radius: 24px;
			}
			.tx_2wm{
				height: 36px;
				width: 36px;
			}
		}
	}
	.top_view_img{
		position: absolute;
		width: 100%;
		height: 240px;
		z-index: 0;
	}
	.top_view_img1{
		position: absolute;
		width: calc(100% - 40px);
		left: 20px;
		bottom: -16px;
		z-index: 0;
		.img{
			width: 100%;
			border-radius: 0 0 8px 8px;
		}
		.ttt_div{
			position: absolute;
			width: calc(100% - 40px);
			padding: 32px 20px 0;
			top: 0;
			left: 0;
			color: #fff;
			.t_small{
				font-size: 12px;
				text-align: center;
				margin-top: 8px;
			}
			.dl_btn{
				height: 24px;
				background-color: #fff;
				border-radius: 14px;
				font-size: 14px;
				line-height: 24px;
				padding: 0 12px;
				color: #0091FF;
			}
		}
	}
}
.r_jian{
	position: relative;
	&::after{
		position: absolute;
		content:' ';
		height: 8px;
		width: 8px;
		border-right:1px solid #fff;
		border-top:1px solid #fff;
		transform: rotate(45deg);
		top: 5px;
	}
}
.xx_content{
	padding: 20px;
	justify-content: space-around;
}
.xx_item{
	width: 30%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 14px;
	color: #333;
	.img{
		width: 28px;
		height: 28px;
		margin-bottom: 2px;
	}
	.img_small{
		width: 26px;
		height: 26px;
		margin-bottom: 4px;
	}
}
.line_div{
	width: 100%;
	height: 8px;
	background-color: #F5F9FA;
}

.line_item{
	border-bottom: 1px solid #F5F9FA;
	padding: 10px 20px;
	// align-items: center;
	font-size: 14px;
	.l_l_img{
		width: 22px;
		height: 22px;
		margin-right: 10px;
	}
	.l_l_img1{
		height: 22px;
		margin-right: 15px;
	}
	.l_r_text{
		color:#1c9dff;
		font-size: 14px;
		padding-right: 14px;
		position: relative;
		&::after{
			content: ' ';
			position: absolute;
			height: 7px;
			width: 7px;
			border-top: 1px solid #aaa;
			border-right: 1px solid #aaa;
			transform: rotate(45deg);
			top: 6px;
			right: 0;
		}
	}
}
.none_border{
	border:none !important;
}
.line_item1{
	width: 100%;
	border: none;
	font-size: 14px;
	padding: 0;
	height: 22px;
}
.item_active{
	background:rgba(0, 0, 0, 0.05) !important;
}
</style>

